import { pagePathAtom } from "@/features/business/HomePage_deprecated/atom"
import { PATHS } from "@/router/routes"
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { memo, useCallback } from "react"
import { NavLink, useLocation, useMatch } from "react-router-dom"
import { HomeIcon, InviteIcon, MyIcon, PointsIcon, WelfareIcon } from "./icons"
import { useLoginAction } from "@/features/useSearchAction"
import { tokenStore } from "@/utils/cached"

const NavContainer = styled.nav`
    position: sticky;
    z-index: 100;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56rem;
    background: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -1rem 10rem rgba(0, 0, 0, 0.05);
`

const NavItem = styled(NavLink)`
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 4rem;
    color: #69728c;
    font-size: 10rem;
    flex: 1;

    &.active {
        color: #ff1f57;
    }
`
const NavItemA = styled.a`
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 4rem;
    color: #69728c;
    font-size: 10rem;
    flex: 1;

    &.active {
        color: #ff1f57;
    }
`
const IconWrapper = styled.div`
    width: 24rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
`

function BottomNavigateBar() {
    const location = useLocation()
    const isActive = (path: string) => location.pathname === path
    const token = tokenStore.get()
    const { openModalToStep } = useLoginAction()

    const open = useCallback(() => {
        openModalToStep("login-otp-1")
    }, [openModalToStep])

    const match_GAME_CATEGORY = useMatch(PATHS.GAME_CATEGORY)

    const [cachePath] = useAtom(pagePathAtom)

    return (
        <NavContainer>
            <NavItem
                to={cachePath.homeCurrentPath || PATHS.INDEX}
                className={isActive(PATHS.INDEX) || !!match_GAME_CATEGORY ? "active" : ""}
            >
                <IconWrapper>
                    <HomeIcon active={isActive(PATHS.INDEX) || !!match_GAME_CATEGORY} />
                </IconWrapper>
                Home
            </NavItem>
            {token?.accessToken ? (
                <NavItem to={PATHS.POINTS}>
                    <IconWrapper>
                        <PointsIcon active={isActive(PATHS.POINTS)} />
                    </IconWrapper>
                    Points
                </NavItem>
            ) : (
                <NavItemA onClick={open}>
                    <IconWrapper>
                        <PointsIcon active={isActive(PATHS.POINTS)} />
                    </IconWrapper>
                    Points
                </NavItemA>
            )}
            {token?.accessToken ? (
                <NavItem to={PATHS.WELFARE}>
                    <IconWrapper>
                        <WelfareIcon active={isActive(PATHS.WELFARE)} />
                    </IconWrapper>
                    Welfare
                </NavItem>
            ) : (
                <NavItemA onClick={open}>
                    <IconWrapper>
                        <WelfareIcon active={isActive(PATHS.WELFARE)} />
                    </IconWrapper>
                    Welfare
                </NavItemA>
            )}
            {token?.accessToken ? (
                <NavItem to={PATHS.INVITE}>
                    <IconWrapper>
                        <InviteIcon active={isActive(PATHS.INVITE)} />
                    </IconWrapper>
                    Invite
                </NavItem>
            ) : (
                <NavItemA onClick={open}>
                    <IconWrapper>
                        <InviteIcon active={isActive(PATHS.INVITE)} />
                    </IconWrapper>
                    Invite
                </NavItemA>
            )}
            {token?.accessToken ? (
                <NavItem to={PATHS.MY}>
                    <IconWrapper>
                        <MyIcon active={isActive(PATHS.MY)} />
                    </IconWrapper>
                    My
                </NavItem>
            ) : (
                <NavItemA onClick={open}>
                    <IconWrapper>
                        <MyIcon active={isActive(PATHS.MY)} />
                    </IconWrapper>
                    My
                </NavItemA>
            )}
        </NavContainer>
    )
}

export default memo(BottomNavigateBar)
